<template>
    <div class="forgeMy">
        <div class="forgeMy_user">
            <van-image class="forgeMy_user_image" :src="userInfo?.avatar" round fit="cover" />
            <div class="forgeMy_user_info">
                <div class="forgeMy_user_info_name">{{ userInfo?.nickName }}</div>
                <div class="forgeMy_user_info_dandp">
                    {{ userInfo.dept?.deptName }} | {{ roles.roleName }}
                </div>
            </div>
            <div class="forgeMy_user_right" @click="quit">退出</div>
        </div>
        <div class="forgeMy_box">
            <!-- <div class="forgeMy_box_item" @click="routerPush('/editPassword', true)">
                <img class="item_img" src="@/assets/productHome/icon_xiugaimima.png" alt="">
                <div class="item_flex">
                    <span>修改密码</span>
                    <van-icon name="arrow" color="#B8BECA" />
                </div>
            </div> -->
            <div class="forgeMy_box_item" @click="routerPush('/personalDetails')">
                <img class="item_img" src="@/assets/productHome/icon_gerenxinxi.png" alt="">
                <div class="item_flex">
                    <span>个人信息</span>
                    <van-icon name="arrow" color="#B8BECA" />
                </div>
            </div>
            <div class="forgeMy_box_item" @click="routerPush('/policy')">
                <img class="item_img" src="@/assets/productHome/icon_yinsixieyi.png" alt="">
                <div class="item_flex">
                    <span>隐私政策</span>
                    <van-icon name="arrow" color="#B8BECA" />
                </div>
            </div>
            <div class="forgeMy_box_item" @click="routerPush('/userAgreement')">
                <img class="item_img" src="@/assets/productHome/icon_yonghuxieyi.png" alt="">
                <div class="item_flex">
                    <span>用户协议</span>
                    <van-icon name="arrow" color="#B8BECA" />
                </div>
            </div>
            <div class="forgeMy_box_item" @click="routerPush('/aboutMe')">
                <img class="item_img" src="@/assets/productHome/icon_guanyu.png" alt="">
                <div class="item_flex">
                    <span>关于我们</span>
                    <van-icon name="arrow" color="#B8BECA" />
                </div>
            </div>
            <div class="forgeMy_box_item" @click="logoff">
                <img class="item_img" src="@/assets/productHome/icon_guanyu.png" alt="">
                <div class="item_flex">
                    <span>注销用户</span>
                    <van-icon name="arrow" color="#B8BECA" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getInfo } from "@/api/supplierList/index";
import { loginStore } from "@/store/login";
import { apiLogout, cancel } from "@/api/loginApi";
import { showConfirmDialog, showSuccessToast } from "vant";

const router = useRouter();
const userInfo = ref<any>({});
const roles = ref<any>({});
const login = loginStore();

const getList = async () => {
    const res = await getInfo();
    roles.value = res.data.user.roles[0];
    userInfo.value = res.data.user;
};
getList();

const routerPush = (path: string, type?: null | boolean) => {
    if (!type) {
        router.push(path);
    }
}
/** 注销 */
const logoff = async () => {
    showConfirmDialog({
        message: "是否确认注销账号",
    }).then(async () => {
        const res = await cancel({ userId: userInfo.value.userId })
        if (res.code === 200) {
            showSuccessToast('注销账号成功');
            login.resetToken();
            router.push("/login");
        }
    });
}

/** 退出 */
const quit = () => {
    showConfirmDialog({
        message: "是否确认退出账号",
    }).then(async () => {
        const res = await apiLogout();
        if (res.code === 200) {
            login.resetToken();
            router.push("/login");
        }
    });
};
</script>

<style lang="less" scoped>
.forgeMy {
    width: 100%;
    height: calc(100vh - 90px);
    background: url("@/assets/home/icon_shouyebeijing.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 60px;
    box-sizing: border-box;
    color: #1a1b1c;
    overflow-y: scroll;

    .forgeMy_user {
        height: 60px;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        position: relative;

        .forgeMy_user_image {
            width: 60px;
            height: 60px;
        }

        .forgeMy_user_info {
            margin-left: 20px;
            margin-top: 10px;

            .forgeMy_user_info_name {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
            }

            .forgeMy_user_info_dandp {
                margin-top: 10px;
                font-size: 14px;
            }
        }

        .forgeMy_user_right {
            position: absolute;
            right: 20px;
            height: 24px;
            color: #ee0a24;
        }
    }

    .forgeMy_box {
        width: 95%;
        margin: 0 auto;
        border-radius: 10px;
        background: #fff;
        margin-top: 20px;
        padding: 20px;
        box-sizing: border-box;

        .forgeMy_box_item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 0;
            border-bottom: 1px solid #ccc;

            .item_img {
                width: 15px;
                height: 15px;
                margin-right: 10px;
            }

            .item_flex {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;

                span {
                    color: #000;
                }

                .item_flex_img {
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }
}
</style>